<template>
  <div class="class-view">
    <Search />
    <div class="class-main">
      <div class="nav">
        <van-sidebar v-model="active">
          <van-sidebar-item
            v-for="(item, index) in classData.categoryList"
            :key="item.id"
            :title="item.name"
            @click="onChange(item.id, index)"
          />
        </van-sidebar>
      </div>

      <div class="class-list">
        <div class="class-desc">
          <img :src="classData.currentCategory.picUrl" alt="" />
          <p>{{ classData.currentCategory.desc }}</p>
        </div>
        <div class="classify">
          <div
            class="classify-item"
            v-for="item in classData.currentSubCategory"
            :key="item.id"
            @click="onItemClick(item.id)"
          >
            <img :src="item.picUrl" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getClassData, getCurrent } from "../../server/api";
import { onMounted, reactive, ref } from "vue";
import Search from "@/components/item/search.vue";
import router from "@/router";
const active = ref(0);

let classData = reactive({
  categoryList: [],
  currentCategory: {},
  currentSubCategory: [],
});

const onChange = (id, index) => {
  active.value = index;
  // console.log(index);
  classData.currentCategory = classData.categoryList.find(
    (item) => item.id === id
  );
  getCurrent(id).then((res) => {
    classData.currentSubCategory = res.data.currentSubCategory;
  });
};

const onItemClick = (id) => {
  console.log("onItemClick");
  router.push({ name: "Classify", params: { id } });
};

//从url中获取分类id，并请求数据
const id = parseInt(router.currentRoute.value.params.id);

onMounted(async () => {
  try {
    const res = await getClassData();
    console.log(res);
    classData.categoryList = res.data.categoryList;
    classData.currentCategory = res.data.currentCategory;
    classData.currentSubCategory = res.data.currentSubCategory;
  } catch (error) {
    console.log(error);
  }
  if (id) {
    active.value = classData.categoryList.findIndex((item) => item.id == id);
    classData.currentCategory = classData.categoryList.find(
      (item) => item.id === id
    );
    getCurrent(id).then((res) => {
      classData.currentSubCategory = res.data.currentSubCategory;
    });
  }
});
</script>

<style scoped lang="scss">
.class-main {
  display: flex;
  gap: 30px;
}
.nav {
  width: calc(35% - 30px);
  height: 80vh;
}
.class-list {
  width: 65%;
  height: 80vh;
}
.van-sidebar {
  height: 100%;
  width: 100%;
}
.class-list {
  /* 让整个分类列表区域有内边距，和外部区分开 */
  padding: 16px;
  /* 限制最大宽度，避免在大屏下过于松散，可根据需求调整 */
  max-width: 1200px;
  margin: 0 auto;
}

.class-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.class-desc img {
  /* 限制描述图片大小，保持统一 */
  width: 95%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin: 0 auto;
}

.class-desc p {
  font-size: 36px;
  color: #333;
  /* 让文字垂直居中对齐 */
  line-height: 80px;
}

.classify {
  /* 用网格布局实现多行多列排列，自适应较好 */
  display: grid;
  /* 每行放 3 个，可根据设计需求调整，比如 2 个、4 个等 */
  grid-template-columns: repeat(3, 1fr);
  /* 网格项之间的间距 */
  gap: 16px;
}

.classify-item {
  /* 让每个分类项内部居中，文字换行也能居中 */
  text-align: center;
}

.classify-item img {
  /* 分类项图片大小，按需调整 */
  width: 110px;
  height: 110px;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: 8px;
}

.classify-item p {
  font-size: 30px;
  color: #666;
}
::v-deep.van-sidebar-item--select:before {
  background-color: red;
}
</style>
